<template>
  <div class="modal" v-show="isShow">
    <div class="mask" @click="close"></div>
    <div class="layui-layer layui-layer-page info" :class="{active: isShow}">
      <div class="layui-layer-title">
        签到活跃榜 - TOP
        <i class="layui-icon layui-icon-close pull-right" @click="close"></i>
      </div>
      <div class="layui-layer-content pd0">
        <div class="layui-tab layui-tab-brief">
          <ul class="layui-tab-title">
            <li :class="{'layui-this': current === 0}" @click="choose(0)">最新签到</li>
            <li :class="{'layui-this': current === 1}" @click="choose(1)">今日最快</li>
            <li :class="{'layui-this': current === 2}" @click="choose(2)">总签到榜</li>
          </ul>
        </div>
      </div>
      <div class="layui-tab-content rankInfo">
        <ul class="layui-tab-item">
          <li v-for="(item, index) in lists" :key="'sign' + index">
            <img src="http://localhost:3000/img/header.jpg" alt="用户头像裂开了" class="mr1">
            <cite class="fly-link">{{item.name}}</cite>
            <span class="fly-grey" v-if="current !== 2">
              签到于 {{item.created}}
            </span>
            <span class="fly-grey" v-else>
              已经连续签到
              <i class="orange">{{item.count}}</i>
              天
            </span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'SignRank',
  props: {
    isShow: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      lists: [{
        name: 'test1',
        count: 4,
        created: '2019-9-1'
      }, {
        name: 'test2',
        count: 6,
        created: '2019-9-1'
      }, {
        name: 'test3',
        count: 2,
        created: '2019-9-1'
      }],
      current: 0
    };
  },
  methods: {
    close () {
      this.$emit('closeModal');
    },
    choose (index) {
      this.current = index;
    }
  }
};
</script>
<style scoped lang="scss">
</style>
